<template>
  <div id="activity-post">
    <h1>活动发布</h1>
    <el-form ref="activityForm" :model="activityForm" :rules="rules">
      <el-form-item label="活动名称" prop="name">
        <el-input v-model="activityForm.name" placeholder="请输入活动名称"></el-input>
      </el-form-item>
      <el-form-item label="活动时间" prop="time">
        <el-date-picker v-model="activityForm.time" type="datetime" placeholder="选择活动时间" class="el-input" style="text-align: center;">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动地点" prop="location">
        <el-input v-model="activityForm.location" placeholder="请输入活动地点"></el-input>
      </el-form-item>
      <el-form-item label="活动描述" prop="description">
        <el-input type="textarea" v-model="activityForm.description" placeholder="请输入活动描述"></el-input>
      </el-form-item>
      <el-form-item label="上传活动图片">
        <el-upload
        class="upload-demo"
        action="http://42.194.162.87:8088/activity/upload"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        style="text-align: left;">
        <el-button slot="trigger" size="small" type="primary">点击上传图片</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item size="small">
        <el-button type="primary" @click="submitActivity('activityForm')">发布活动</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { createActivity  } from '../api/api.js'; 
export default {
  name: 'activity',
  data() {
    return {
      activityForm: {
        name: '',
        time: '',
        location: '',
        description: '',
        imageUrl: ''
      },
      rules: {
        name: [{ required: true, message: '请输入活动名称' }],
        time: [{ required: true, message: '请选择活动时间' }],
        location: [{ required: true, message: '请输入活动地点' }],
        description: [{ required: true, message: '请输入活动描述' }]
      },
      imageData: null
    };
  },
  methods: {
    handleUploadSuccess(response) {
      this.activityForm.imageUrl = "http://42.194.162.87/images/" + response; 
    },
    handleUploadError() {
      console.log('上传图片失败');
    },
    submitActivity(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.activityForm.name.trim() != "" && this.activityForm.description.trim() != "") {
            let params = new URLSearchParams();
            params.append('name', this.activityForm.name);
            params.append('time', this.activityForm.time);
            params.append('location', this.activityForm.location);
            params.append('description', this.activityForm.description);
            params.append('imageUrl', this.activityForm.imageUrl); // 添加图片数据到参数中

            createActivity(params)
              .then(function (response) {
                console.log(response);
                if (response.data === '插入成功') {
                  alert("插入成功");
                  window.location.reload();
                }else if(response.data==='插入失败'){
                  alert("插入失败");
                }
              })
              .catch(function (error) {
                console.log(error);
              });
          }
        } else {
          if (this.activityForm.name.trim() === "") {
            this.$refs.name.style.borderColor = "red";
          } else {
            this.$refs.name.style.borderColor = "#797979";
          }

          if (this.activityForm.description.trim() === "") {
            this.$refs.description.style.borderColor = "red";
          } else {
            this.$refs.description.style.borderColor = "#797979";
          }
          alert("表单验证失败，请检查输入是否正确");
          return false;
        }
      });
    },
  }
};
</script>

<style scoped>
  #activity-post {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  el-form {
    width: 100%;
  }

  el-form-item {
    margin-bottom: 20px;
  }

  el-input,
  el-date-picker,
  el-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 3px;
    
  }

  el-button {
    margin-right: 10px;
    padding: 8px 16px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
  }
</style>

